// 1.饼形图-封装成函数特点： 变量名方便，方便Ajax渲染
  function setPie(arr) {
     let myChart = echarts.init(document.querySelector('.pie'))
     let option = {
      //添加标题和文字颜色
          title: {
            text: '籍贯 Hometown',
            textStyle:{
                color:'#6d767e'
            }
        },
        //删除标题组件
          // legend: {
          //     top: 'bottom'
          // },
          //删除图例组件
          // toolbox: {
          //     show: true,
          //     feature: {
          //         mark: { show: true },
          //         dataView: { show: true, readOnly: false },
          //         restore: { show: true },
          //         saveAsImage: { show: true }
          //     }
          // },
          // 添加 提示框
          tooltip:{
            // 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            formatter: '{a}<br> {b} <b>{c}</b> 人 占比{d}%'
          },
          series: [
              {
                  name: '各地人员分布',
                  type: 'pie',  // 控制图形
                  radius: ['10%','65%'],  //内外圆形的半径
                  center: ['50%', '50%'], // 图形位置
                  roseType: 'area',  // area 面积模式， radius 半径模式
                  itemStyle: {  //元素样式
                      borderRadius: 4  // 边框圆角
                  },
                  data: arr   
              }
          ]
        
     }
     myChart.setOption(option)
  }
    // 函数不调用,不执行
      // setPie()

  // 2. 折线图 -封装成函数特点： 变量名方便，方便Ajax渲染
    function setLine(obj){
      let  myChart =echarts.init(document.querySelector('.line'))
      let option = {
        tooltip: {
          trigger: 'axis',
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        title: {
          // left: 'center',
          text: '薪资 Salary',
          textStyle:{
            color:'#6d767e'
        }
        },
        // 去掉 toolbox工具框
        // toolbox: {
      
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // 修改X坐标值
          data:obj.name
        },
        yAxis: {
          type: 'value',
          // 纵坐标的 boundaryGap ，控制最大值
          boundaryGap: [0, '50%']
        },
        dataZoom: [
          {
            // inside 鼠标滚轮缩放  ，slider 滑块缩放
            type: 'slider',
            start: 0, //开始位置
            end: 15  //结束位置
          },
          {
            start: 0,
            end: 10
          }
        ],
        // 添加图例组件
        legend :{top:20},
        color:['#ee6666','#5470c6'],
        series: [
          {
            name: '期望薪资',
            type: 'line',
            symbol: 'none',  // 转折点样式 circle 圆点  ,none  无状态
            // sampling: 'lttb', 
            smooth : true ,// 转折是否平滑，是否舒缓
            // areaStyle  控制面积颜色,删除
            //修改折线数据
            data: obj.salary
          },
          {
            name: '实际薪资',
            type: 'line',
            symbol: 'none',
            // sampling: 'lttb',
            smooth : true ,// 转折是否平滑，是否舒缓
            // areaStyle  控制面积颜色,删除
            //修改折线数据
            data: obj.truesalary
          }
        ]
        
      };
      myChart.setOption(option)
    }
  //   setLine()
  //  // 函数不调用,不执行

// 3.柱形图  -封装成函数特点： 变量名方便，方便Ajax渲染
    function setBar(obj){
      let myChart=echarts.init(document.querySelector('.barChart'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        

        // 删除 toolbox
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        // 删除legend 里面的打他 内容
        legend: {},
         // 添加网格 属性
         grid:{top:30,bottom:30,left:'7%',right:'7%'},
        xAxis: [
          {
            type: 'category',
            data:obj.group,
            axisPointer: {
              type: 'shadow'  //鼠标进入有阴影
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: 'Precipitation' 坐标轴不需要名称
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value}分'
            }
          },
          {
            type: 'value',
            // name: 'Temperature',  坐标轴不需要名称
            min: 0,
            max: 10,
            interval: 1,
            axisLabel: {
              formatter: '{value}人'
            }
          }
        ],
        series: [
          {
            name: '平均分',
            type: 'bar',
            barWidth:15, //柱子宽度
            yAxisIndex: 0, // 以哪个轴为准 ，默认第一个
           // 删除直接的 tooltip
            data:obj.avgScore
          },
          {
            name: '低于60分人数',
            type: 'bar',
            barWidth:15,
            yAxisIndex: 1, // 以哪个轴为准 ，默认第一个
            // 删除直接的 tooltip
            data:obj.lt60
          },
          {
            name: '60到80分人数',
            type: 'bar',
            barWidth:15,
            yAxisIndex: 1, // 以哪个轴为准 ，默认第一个
           // 删除直接的 tooltip
            data: obj.gt60
          },
          {
            name: '高于80分人数',
            type: 'bar',
            barWidth:15,
            // 删除直接的 tooltip
            yAxisIndex: 1, // 以哪个轴为准 ，默认第一个
            data:obj.gt80
          }
        ]
      };
      
      myChart.setOption(option)
    }
    // // 函数不调用,不执行
    // setBar()

// 4.地图 -封装成函数特点： 变量名方便，方便Ajax渲染
    function setMap( mapData1,mapData2){
      let  myChart = echarts.init(document.querySelector('.map'))
     
  // 位置 + 经纬度
  var chinaGeoCoordMap = mapData1;

    // "顺义校区": [
    //     116.4551,
    //     40.2539
    // ],

    // "海拉尔区": [
    //     119.736279,
    //     49.212189
    // ],
    // "市中区": [
    //     116.997777,
    //     36.651474
    // ],

  var chinaDatas = mapData2;
//   [
//     [
//         {
//             "name": "海拉尔区",
//             "value": 0
//         }
//     ],
//     [
//         {
//             "name": "市中区",
//             "value": 0
//         }
//     ],
// ];

  var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = chinaGeoCoordMap[dataItem[0].name];
      var toCoord = [114.31667,30.51667]; // 目标点经纬度（北京顺义校区）
      if (fromCoord && toCoord) {
        res.push([{
          coord: fromCoord,
          value: dataItem[0].value
        }, {
          coord: toCoord,
        }]);
      }
    }
    return res;
  };
  var series = [];
  [['武汉校区', chinaDatas]].forEach(function (item, i) {
    series.push({
      type: 'lines',
      zlevel: 2,
      effect: {
        show: true,
        period: 4, //箭头指向速度，值越小速度越快
        trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
        symbol: 'arrow', //箭头图标
        symbolSize: 5, //图标大小
      },
      lineStyle: {
        normal: {
          width: 1, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 0.2 //尾迹线条曲直度
        }
      },
      data: convertData(item[1])
    }, {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: { //涟漪特效
        period: 4, //动画时间，值越小速度越快
        brushType: 'stroke', //波纹绘制方式 stroke, fill
        scale: 3.5 //波纹圆环最大限制，值越大波纹越大
      },
      label: {
        normal: {
          show: true,
          position: 'right', //显示位置
          offset: [5, 0], //偏移设置
          formatter: function (params) {//圆环显示文字
            return params.data.name;
          },
          fontSize: 12
        },
        emphasis: {
          show: true
        }
      },
      symbol: 'circle',
      symbolSize: function (val) {
        return 4 + val[2] * 5; //圆环大小
      },
      itemStyle: {
        normal: {
          show: false,
          color: '#f00'
        }
      },
      data: item[1].map(function (dataItem) {
        return {
          name: dataItem[0].name,
          value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
        };
      }),
    },
      //被攻击点
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: true,
            position: 'right',
            offset: [5, 0],
            color: '#9eca7f', // 目标点文字颜色
            formatter: '{b}',
            textStyle: {
              color: "#9eca7f"
            }
          },
          emphasis: {
            show: true,
            color: "#f60", // 目标点鼠标移入的颜色
          }
        },
        symbol: 'pin',
        symbolSize: 50,
        data: [{
          name: item[0],
          value: chinaGeoCoordMap[item[0]].concat([10]),
        }],
      }
    );
  });

  let option = {
    title: {
      text: '来汉路线 From',
      textStyle: {
        color: '#6d767e'
      }
    },
    // tooltip: {
    //   trigger: 'item',
    //   backgroundColor: 'rgba(166, 200, 76, 0.82)',
    //   borderColor: '#FFFFCC',
    //   showDelay: 0,
    //   hideDelay: 0,
    //   enterable: true,
    //   transitionDuration: 0,
    //   extraCssText: 'z-index:100',
    //   formatter: function (params, ticket, callback) {
    //     //根据业务自己拓展要显示的内容
    //     var res = "";
    //     var name = params.name;
    //     var value = params.value[params.seriesIndex + 1];
    //     res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
    //     return res;
    //   }
    // },
    // backgroundColor: "#013954",
    // visualMap: { //图例值控制
    //   min: 0,
    //   max: 1,
    //   calculable: true,
    //   show: false,
    //   color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
    //   textStyle: {
    //     color: '#fff'
    //   }
    // },
    geo: {
      map: 'china',
      zoom: 1.2,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true, //是否允许缩放
      itemStyle: {
        normal: {
          // color: 'rgba(51, 69, 89, .5)', //地图背景色
          // color: '#5a6fc0', //地图背景色
          // borderColor: '#516a89', //省市边界线00fcff 516a89
          borderWidth: 1
        },
        emphasis: {
          color: 'rgba(37, 43, 61, .5)' //悬浮背景
        }
      }
    },
    series: series
  };

      myChart.setOption(option)
    }
    // 函数不调用,不执行
    // setMap()


// 需求1 页面加载渲染 学生概况
      axios({
        url:'/student/overview',
        method:'get',
      }).then(({ data: res})=>{
        //成功回调
        // console.log(res)
        if(res.code==0){
          document.querySelector('.total').innerHTML=res.data.total
          document.querySelector('.avgSalary').innerHTML=res.data.avgSalary
          document.querySelector('.avgAge').innerHTML=res.data.avgAge
          document.querySelector('.proportion').innerHTML=res.data.proportion
        }
      })
      

// 需求 2  

// 2.1 点击小点  ,显示影藏 li
let btn =document.querySelector('.bar .btn')
let batch = document.querySelector('#batch')
    //  在 li 标签上要添加style="display:none"
btn.addEventListener('click',function(){
  if(batch.style.display=='none'){
    batch.style.display='block'
  }else{
    batch.style.display='none'
  }
})

// 2.2 点击a/li 标签 发送Ajax 渲染柱形图
let lis = document.querySelectorAll('#batch li')
  for(let i = 0 ; i< lis.length ; i++){
    // console.log(i);
    lis[i].onclick=function(){
      axios({
        url:'/score/batch',
        method:'get',
        // 第几次成绩,这个属性,从接口文档获取
        params: {
          batch:i+1
        }
      }).then(({ data : res })=>{
        //成功回调
        // console.log(res)
        // 判断业务状态码 
        if(res.code==0){
          // 将数据渲染到setBar
          setBar(res.data)
        }
      })
    }
}
lis[0].click()


// 需求3 折线图、饼形图、地图 使用同一个Ajax 查询全部学院
//  发送Ajax 获取全部学员信息
axios({
  url:'/student/list',
  method:'get',
}).then(({ data:res })=>{
  //成功回调
  if(res.code==0){
    // console.log(res)
    // 3.1折线图渲染
    let lineData={
       name:[],
       salary:[],
       truesalary:[]
    }

    // 3.2 饼形图 -需要一个数组
    // [{ value:40,name:'河北省'}]
    // 定义一个数组，在遍历 res.data 的函数中，判断数组中某个省份是否存在
    //  如果不存在,就添加一个 对象 进去; {value:1,name:'河北省'}
    //  如果省份存在,那就让他 value++
      let pieData=[]

      // 3.3地图制作 - 一个对象， 一个数组 // 实现原理和饼图类似
      //   一个对象 ： 属性是地区，值是经纬度组成的数组  区域坐标（相同区域坐标值相等，可以让后面的把前面的覆盖，这样省去了判断的代码）
      let mapData1 = {"武汉校区":[114.31667,30.51667]}
      let mapData2=[]
      
          

    // 遍历数组，将满足条件的元素，添加到对应的数组中
    res.data.forEach(item=>{
      // 把学生对象中的姓名、期望薪资、实际薪资添加到对应的对象中
      lineData.name.push(item.name)
      lineData.salary.push(item.salary)
      lineData.truesalary.push(item.truesalary)

    // 圆饼图
      // 判断学生所在省份,在数组中是否存在 : findIndex()
      let index= pieData.findIndex(ele=>ele.name==item.province)
      // 如果数组中不存在该省份，则index将返回-1， 就将省份名字加到数组name中 ，数量加到数组value中
      if(index==-1){
        pieData.push({value:1,name:item.province})
      }else{
        // 如果数组中存在该省份的名字就将value值进行加 1 
        pieData[index].value++
      }

      //  地图
      mapData1[item.county]=[item.jing,item.wei]
      //  一个数组：里面的元素也是数组 (二维数组)
      // 地图数据2 ： 实现原理类比饼状图；获取索引值后，判断存在就 value++，不存在就添加新对象
      // 变量 mapData2 数据的类型 [  [ { name: "海拉尔区", value:0 } ] ] 
      // 判断 :ele 是一个数组，所有要使用他里面的变量需要 ele[0] ,然后判断它的 name 和 item.county是否相同
       let i =  mapData2.findIndex(ele=> ele[0].name == item.county)
        if( i == -1){
          // 数组中没有对应的元素，就添加一个新的
            mapData2.push( [ { name : item.county, value: 1}]) //添加一个数组，数组里面是对象
        }else{
          // 数组中有对应的元素，让 value++
          mapData2[i][0].value++  // mapData2[i] 是指定元素 ， [0]是拿到这个数组里面的对象
        }

    })

    // 打印输出-并调用数据可视化对应方法
    // 折线图
    setLine(lineData)
    // console.log(lineData);
    // 饼形图
    setPie(pieData)
    // console.log(pieData)
    // 地图
    setMap(mapData1,mapData2)
    // console.log(mapData1,mapData2)
  }

})

